<template>
  <div class="map">
    <div id="cesiumContainer" class="wrap" />
    <div class="legend-wrapper">
      <div class="legend-item">
        <div class="line yellow-line"></div>
        <div class="text">U/V链路</div>
      </div>
      <div class="legend-item">
        <div class="line green-line"></div>
        <div class="text">Ku散射链路</div>
      </div>
      <div class="legend-item">
        <div class="line blue-line"></div>
        <div class="text">C散射链路</div>
      </div>
    </div>
    <div class="table-wrapper">
      <el-table
        v-if="checkedBox.businessCheck"
        ref="multipleTable"
        :data="tableData"
        stripe
        :header-cell-style="{
          textAlign: 'center',
          background: '#013770',
          color: '#1adafb',
          fontSize: '#2rem',
          border: 'none',
        }"
        :cell-style="{
          textAlign: 'center',
          background: '#020e36',
          color: '#ffffff',
          border: 'none',
        }"
        style="width: 100%"
      >
        <el-table-column prop="linkName" label="通信链路名称" width="110">
        </el-table-column>
        <el-table-column
          prop="resourceFileName"
          label="传输文件名称"
          width="110"
        >
        </el-table-column>
        <el-table-column prop="resourceSize" label="文件大小" width="90">
        </el-table-column>
        <el-table-column prop="resourceReSize" label="接收数据大小" width="130">
        </el-table-column>
        <el-table-column prop="sendPackage" label="发送包数" width="90">
        </el-table-column>
        <el-table-column prop="rePackage" label="接收包数" width="90">
        </el-table-column>
        <el-table-column
          prop="linkCurDataSendRate"
          label="当前传输速率"
          width="110"
        >
        </el-table-column>
        <el-table-column prop="linkMedianDataSendRate" label="传输速率(中位数)">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
const Cesium = require("cesium/Cesium");
// 这个key是为了使用cesium的在线影像
Cesium.Ion.defaultAccessToken =
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzNzI5MTM2Ni0wZWQzLTRiMGMtYWEwYS03ZTBiYzM5ZDQwMjYiLCJpZCI6ODU5NzQsImlhdCI6MTY0NzQxODYxOX0.xsU5fSrTdrvrruM0KBiWCspZvBSkikbSeXWaTnqkCBI";

export default {
  name: "Map",
  components: {},
  data() {
    return {
      viewer: null,
      cameraFlag: false,
      lineFlag: true,
      // 点的实体数组（每个元素格式：{id: string, entity: Entity}）
      pointsEntities: [],
      // 拓扑线的实体数组
      topologyLineEntities: {},
      // 业务线线的实体数组
      businessLineEntities: {},
      // 节点数据
      pointData: [],
      // 拓扑线数据
      topologyLineData: [],
      // 业务线数据
      businessLineData: [],
      // 右上角图例
      linkTypeArr: [
        {
          linkType: 0,
          linkTypeLabel: "U/V链路",
          linkTypeColor: "#ffaa31",
        },
        {
          linkType: 1,
          linkTypeLabel: "Ku散射链路",
          linkTypeColor: "#1ed96d",
        },
        {
          linkType: 2,
          linkTypeLabel: "C散射链路",
          linkTypeColor: "#55a1ff",
        },
      ],
      // 速率等级
      rateLevelArr: [
        {
          rateLevel: 0,
          //绿色（>=16Mbps）
          rateLevelColor: "#51ff25",
        },
        {
          rateLevel: 1,
          //蓝色（>=1Mbps）
          rateLevelColor: "#0505ee",
        },
        {
          rateLevel: 2,
          //黄色（>=96kbps）
          rateLevelColor: "#fafd09",
        },
        {
          rateLevel: 3,
          //紫色（>=4.8kbps）
          rateLevelColor: "#fc31ff",
        },
        {
          rateLevel: 4,
          //红色（=2.4kbps）
          rateLevelColor: "#e51111",
        },
      ],
      // 线显隐
      lineShow: true,
      checkedBox: {
        deviceCheck: true,
        linkCheck: true,
        infoCheck: true,
        businessCheck: true,
      },
    };
  },
  computed: {
    tableData() {
      let objData = JSON.parse(
        JSON.stringify(this.$store.getters.sendStatusData)
      );
      let arr = [];
      arr.push(objData);
      console.log("态势表格数据", arr);
      return arr;
    },
  },
  watch: {
    "$store.getters.topologyPointData": {
      deep: true,
      // immediate: true,
      handler(val) {
        if (this.cameraFlag) {
          console.log("页面内点数据：", val);
          // 对比新旧数据差异
          const diffResult = this.comparePoints(this.pointData, val);
          // 根据差异更新地图实体
          this.updatePointEntities(diffResult);
          this.pointData = val;
        }
      },
    },
    "$store.getters.topologyLineData": {
      deep: true,
      // immediate: true,
      handler(val) {
        if (this.lineFlag && this.cameraFlag) {
          console.log("页面内拓扑线数据：", val);
          if (this.lineShow) {
            this.topologyLineDataChanged(val, "topology");
            this.topologyLineData = val;
          }
        }
      },
    },
    "$store.getters.businessLineData": {
      deep: true,
      // immediate: true,
      handler(val) {
        if (this.lineFlag && this.cameraFlag) {
          console.log("页面内业务线数据：", val);
          if (this.lineShow) {
            this.businessLineDataChanged(val, "business");
            this.businessLineData = val;
          }
        }
      },
    },
  },
  created() {},
  mounted() {
    this.initCesium(); // 初始化
    // 使用本地测试数据
    this.useLocalTestData();
  },
  methods: {
    // 初始化地图
    initCesium() {
      this.viewer = new Cesium.Viewer("cesiumContainer", {
        animation: false, // 是否创建动画小器件，左下角仪表，创建后暂停还能支持继续播放，调速等
        baseLayerPicker: false, // 是否显示图层选择器
        fullscreenButton: false, // 是否显示全屏按钮
        geocoder: false, // 是否显示geocoder小器件，右上角查询按钮
        homeButton: false, // 是否显示Home按钮
        infoBox: false, // 是否显示信息框
        sceneModePicker: false, // 是否显示3D/2D选择器
        selectionIndicator: false, // 是否显示选取指示器组件
        timeline: false, // 是否显示时间轴  实例化cesium时，应该启用时间轴否则会报zoomTo is undefined viewer.timeline.zoomTo(start,stop);
        navigationHelpButton: false, // 是否显示右上角的帮助按钮
        navigationInstructionsInitiallyVisible: false,
        shouldAnimate: true, // Enable animations
        // terrainProvider: Cesium.createWorldTerrain(), // 加载在线全球地形数据
        // 加载离线地形
        terrainProvider: new Cesium.CesiumTerrainProvider({
          url: "http://192.168.43.82:9999/jjj",
        }),
        // 私有gis服务器
        // imageryProvider: new Cesium.WebMapServiceImageryProvider({
        //   url: "https://neo.gsfc.nasa.gov/wms/wms",
        //   layers: "BlueMarbleNG",
        //   parameters: {
        //     service: "WMS",
        //     format: "image/png",
        //     transparent: true,
        //   },
        // }),
        // 私有xyz服务器-加载离线瓦片
        imageryProvider: new Cesium.UrlTemplateImageryProvider({
          // url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
          url: "http://192.168.43.82:9999/dem/{z}/{x}/{y}.png",
          // url: "http://192.168.43.66:9999/map/2/3/1.png",
        }),
        // imageryProvider: new Cesium.UrlTemplateImageryProvider({
        //   url: "/map/{z}/{x}/{y}.png",
        // }),
        // imageryProvider: new Cesium.createTileMapServiceImageryProvider({
        //   //url: 'http://localhost:8080/chinaimage/image/tiles',
        //   url: "http://192.168.43.66:9999/hainanimage/tiles",
        //   fileExtension: "png",
        // }),
        // baseLayerPicker: false, // 关闭 Cesium 默认的地图选择器
      });
      // //cesium时钟日期格式化
      // this.viewer.animation.viewModel.dateFormatter = this.CesiumDateFormatter;
      // //cesium时钟时间格式化
      // this.viewer.animation.viewModel.timeFormatter = this.CesiumTimeFormatter;
      // //cesium时间轴格式化
      // Cesium.Timeline.prototype.makeLabel = this.CesiumDateTimeFormatter;

      // 添加在线地图影像，最后需要替换
      // this.viewer.imageryLayers.remove(this.viewer.imageryLayers.get(0)); // 移除默认图层
      // this.viewer.imageryLayers.addImageryProvider(
      //   new Cesium.IonImageryProvider({ assetId: 3954 })
      // );
      //
      this.viewer._cesiumWidget._creditContainer.style.display = "none"; // 去掉logo
      //
      // this.viewer.scene.globe.enableLighting = false; // 设置为true：区分白天跟黑夜，使用太阳光也就是我们平时的光白天亮晚上黑；设置为false则都是亮的

      // 摄像机聚焦到开始位置
      this.viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(116.342255, 39.72, 20000),
        orientation: {
          heading: Cesium.Math.toRadians(0), // 朝向
          pitch: Cesium.Math.toRadians(-45), // 俯仰角
          roll: 0.0, // 翻滚角
        },
      });
      // 可选的相机位置检查
      this.viewer.camera.moveEnd.addEventListener(() => {
        console.log("相机移动停止，当前位置：", this.viewer.camera.position);
        this.$nextTick(() => {
          this.cameraFlag = true;
        });
      });

      // 初始化事件处理器
      this.handler = new Cesium.ScreenSpaceEventHandler(
        this.viewer.scene.canvas
      );

      //点击事件
      let self = this;
      this.handler.setInputAction((event) => {
        // 1、为地图添加点击事件，点击打印该点经纬高
        const position = this.viewer.scene.camera.pickEllipsoid(
          event.position,
          this.viewer.scene.globe.ellipsoid
        );
        if (position) {
          // 将笛卡尔坐标转换为经纬度（弧度）
          const cartographic = Cesium.Cartographic.fromCartesian(position);

          const longitude = Cesium.Math.toDegrees(cartographic.longitude);
          const latitude = Cesium.Math.toDegrees(cartographic.latitude);
          // const height = cartographic.height;
          // console.log(longitude,latitude,height);
          Cesium.sampleTerrain(this.viewer.terrainProvider, 12, [
            cartographic,
          ]).then(function (updatedPositions) {
            var height = updatedPositions[0].height;
            console.log(
              "The mouse is currently at longitude:" +
                longitude +
                ", latitude:" +
                latitude +
                ",height:" +
                height
            );
          });
        }
        // 2、为节点添加点击事件，点击获取当前节点id
        const pickedObject = this.viewer.scene.pick(event.position);
        if (pickedObject && pickedObject.id) {
          const modelId = pickedObject.id.id;
          //将当前节点id传给父组件，用来查询基本信息及后续操作
          self.$emit("queryId", modelId);
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    },
    /**
     * 节点数据变化对比算法
     * @param {Array} oldVal 旧数据
     * @param {Array} newVal 新数据
     * @returns {Object} 包含新增、删除、变化的数组
     */
    comparePoints(oldVal = [], newVal = []) {
      const added = []; // 新增的点
      let removed = []; // 需要删除的点
      const changed = []; // 需要更新的点

      // 查找需要删除的点（存在于旧数据但不存在于新数据）
      removed = oldVal.filter(
        (oldItem) => !newVal.find((newItem) => newItem.id === oldItem.id)
      );

      // 遍历新数据查找新增和变化的点
      newVal.forEach((newItem) => {
        const oldItem = oldVal.find((item) => item.id === newItem.id);

        if (!oldItem) {
          // 新增的点
          added.push(newItem);
        } else {
          // 变化的和一点没变的都放这里
          changed.push(newItem);
        }
      });
      return { added, removed, changed };
    },
    // 节点数据变化对比算法返回数据更新节点实体
    updatePointEntities({ added, removed, changed }) {
      // 处理删除的点
      removed.forEach((point) => {
        // 查找对应的实体索引
        const index = this.pointsEntities.findIndex((e) => e.id === point.id);
        if (index !== -1) {
          // 从地图移除实体
          this.viewer.entities.remove(this.pointsEntities[index].entity);
          // 从数组中删除记录
          this.pointsEntities.splice(index, 1);
        }
      });

      // 处理新增的点
      added.forEach((point) => {
        const entity = this.createPointEntity(point);
        // 将新实体加入数组
        this.pointsEntities.push({
          id: point.id,
          entity: entity,
        });
      });

      // 处理变化的点
      changed.forEach((point) => {
        const record = this.pointsEntities.find((e) => e.id === point.id);
        let height = 0;
        Cesium.sampleTerrainMostDetailed(Cesium.createWorldTerrain(), [
          Cesium.Cartographic.fromDegrees(
            Number(point.position[0]),
            Number(point.position[1])
          ),
        ]).then((updatedPositions) => {
          height = updatedPositions[0].height;
        });

        if (record) {
          // 更新实体位置
          record.entity.position = Cesium.Cartesian3.fromDegrees(
            Number(point.position[0]),
            Number(point.position[1]),
            Number(height)
          );
          // 更新label中的text
          record.entity.label.text = `id：${point.id}\n天线状态：${point.obj["antStatus"]}\n功放状态：${point.obj["paStatus"]}\n波导开关状态：${point.obj["waveSwitchStatus"]}\n保密机状态：${point.obj["securityStatus"]}\n风扇状态：${point.obj["fanStatus"]}`;
        }
      });
    },
    // 创建点实体
    createPointEntity(point) {
      let height = 0;
      Cesium.sampleTerrainMostDetailed(Cesium.createWorldTerrain(), [
        Cesium.Cartographic.fromDegrees(
          Number(point.position[0]),
          Number(point.position[1])
        ),
      ]).then((updatedPositions) => {
        height = updatedPositions[0].height;
      });
      return this.viewer.entities.add({
        id: point.id,
        name: "点",
        show: true,
        position: Cesium.Cartesian3.fromDegrees(
          Number(point.position[0]),
          Number(point.position[1]),
          Number(height)
        ),
        model: {
          uri: `glb/${point.type}.glb`, // 本地glTF/glb模型路径（根据项目结构调整）
          scale: 0.8, // 缩放比例（根据模型大小调整）
          minimumPixelSize: 50, // 模型最小显示像素（避免过小不可见）
          maximumScale: 300, // 模型最大缩放比例（避免过大）
          // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, // 贴地模式（可选）
          // heightReference: Cesium.HeightReference.NONE, // 非贴地模式（可选）
          // color: Cesium.Color.WHITE.withAlpha(0.8), // 模型颜色混合（可选）
          // colorBlendMode: Cesium.ColorBlendMode.MIX, // 颜色混合模式（可选）
          // silhouetteColor: Cesium.Color.fromCssColorString("#0866f8"), // 轮廓线颜色（可选）
          silhouetteSize: 2, // 轮廓线宽度（可选）
        },
        label: {
          // 铭牌显示的文本内容，可以从point对象中获取
          text: `id：${point.id}\n天线状态：${point.obj["antStatus"]}\n功放状态：${point.obj["paStatus"]}\n波导开关状态：${point.obj["waveSwitchStatus"]}\n保密机状态：${point.obj["securityStatus"]}\n风扇状态：${point.obj["fanStatus"]}`,
          font: "15px sans-serif",
          fillColor: Cesium.Color.WHITE,
          outlineColor: Cesium.Color.BLACK,
          outlineWidth: 5,
          horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
          verticalOrigin: Cesium.VerticalOrigin.CENTER,
          pixelOffset: new Cesium.Cartesian2(0, -80), // 固定偏移量
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
            100,
            50000
          ), // 在 100 米到 20000 米之间显示
          showBackground: true,
          backgroundColor: Cesium.Color.BLACK.withAlpha(0.7),
          backgroundPadding: new Cesium.Cartesian2(10, 10),
          show: true, // 初始显示标签
        },
      });
    },

    // 拓扑线数据变化
    topologyLineDataChanged(lineData, lineType) {
      // 先清除所有旧线
      this.removeAllLines(this.topologyLineEntities);
      // 再绘制新线
      this.drawLines(lineData, lineType);
    },
    // 业务线数据变化
    businessLineDataChanged(lineData, lineType) {
      // 先清除所有旧线
      this.removeAllLines(this.businessLineEntities);
      // 再绘制新线
      this.drawLines(lineData, lineType);
    },
    // 清除所有线实体
    removeAllLines(entity) {
      // 遍历所有线实体
      Object.keys(entity).forEach((lineId) => {
        // 从 Viewer 中移除实体
        this.viewer.entities.remove(entity[lineId]);
        // 如果是业务线，移除动画监听
        if (this.businessLineEntities[lineId]) {
          this.viewer.clock.onTick.removeEventListener(
            this.businessLineEntities[lineId].animationHandler
          );
        }
        // 删除对象引用
        delete entity[lineId];
      });
      entity = {}; // 清空引用数组
    },
    // 绘制当前数据中的线
    drawLines(lineData, lineType) {
      lineData.forEach((config) => {
        config.positions.start.forEach((item, index) => {
          config.positions.start[index] = Number(item);
        });
        config.positions.end.forEach((item, index) => {
          config.positions.end[index] = Number(item);
        });

        lineType === "business"
          ? this.updateBusinessLinePosition(
              config.id,
              config["positions"]["start"],
              config["positions"]["end"],
              config
            )
          : this.updateLinePosition(
              config.id,
              config["positions"]["start"],
              config["positions"]["end"],
              config
            );
      });
    },
    // 创建 - 拓扑线
    updateLinePosition(lineId, startPoint, endPoint, config) {
      const positions = Cesium.Cartesian3.fromDegreesArrayHeights([
        startPoint[0],
        startPoint[1],
        0,
        endPoint[0],
        endPoint[1],
        0,
      ]);

      // 获取新颜色
      const newColor = Cesium.Color.fromCssColorString(
        this.linkTypeArr[config.linkType]["linkTypeColor"]
      );
      // 创建拓扑线，实线
      this.topologyLineEntities[lineId] = this.viewer.entities.add({
        id: lineId,
        polyline: {
          positions: new Cesium.CallbackProperty(() => positions, false), //  避免重新创建
          width: 2,
          // 依据linkStatus判断链路状态，0-断开-虚线、0-连接-实线
          material: config.linkStatus
            ? new Cesium.ColorMaterialProperty(
                new Cesium.Color(
                  newColor.red,
                  newColor.green,
                  newColor.blue,
                  newColor.alpha
                )
              )
            : new Cesium.PolylineDashMaterialProperty({
                color: new Cesium.Color(
                  newColor.red,
                  newColor.green,
                  newColor.blue,
                  newColor.alpha
                ), // 颜色继承原配置
                dashPattern: 0x00ff, // 16位二进制虚线模式（示例：0x00FF表示短划线+间隙交替）
                dashLength: 10, // 虚线段长度（可根据需求调整）
              }),
          // 带箭头实线
          /* material: new Cesium.PolylineArrowMaterialProperty(
              new Cesium.Color(
                newColor.red,
                newColor.green,
                newColor.blue,
                newColor.alpha
              )
            ), */
        },
      });
    },
    // 创建 - 业务线
    updateBusinessLinePosition(lineId, startPoint, endPoint, config) {
      const positions = Cesium.Cartesian3.fromDegreesArrayHeights([
        startPoint[0],
        startPoint[1],
        0,
        endPoint[0],
        endPoint[1],
        0,
      ]);
      // 获取新颜色
      const newColor = Cesium.Color.fromCssColorString(
        this.rateLevelArr[config.rateLevel]["rateLevelColor"]
      );

      // 创建新线
      const lineEntity = this.viewer.entities.add({
        id: lineId,
        polyline: {
          positions: new Cesium.CallbackProperty(() => positions, false),
          width: 10,
          material: new Cesium.PolylineDashMaterialProperty({
            // 业务线为蓝色流动虚线
            // color: Cesium.Color.fromCssColorString("#0505ee"),
            color: new Cesium.Color(
              newColor.red,
              newColor.green,
              newColor.blue,
              newColor.alpha
            ), // 颜色继承原配置
            dashLength: 30,
            // 虚线模式
            dashPattern: parseInt("1111000011110000", 1),
            gapColor: Cesium.Color.TRANSPARENT,
          }),
        },
      });

      this.businessLineEntities[lineId] = lineEntity;

      // 为蓝色线添加流动动画效果
      const animationState = {
        offset: 0,
        speed: 0.02,
      };

      // 保存动画处理器引用
      const animationHandler = this.viewer.clock.onTick.addEventListener(() => {
        // 添加实体存在检查
        if (!this.businessLineEntities[lineId]) return;
        animationState.offset += animationState.speed;
        if (animationState.offset > 1) animationState.offset = 0;

        // 更新虚线偏移量
        this.businessLineEntities[lineId].polyline.material.dashPattern =
          parseInt("1111000011110000", 2) <<
          Math.floor(animationState.offset * 16);
      });
      // 保存动画处理器以便后续移除
      lineEntity.animationHandler = animationHandler;
    },

    // 前端自测数据
    useLocalTestData() {
      setTimeout(() => {
        this.$store.commit("websocket/SET_TOPOLOGY_POINT_DATA", [
          {
            id: "p1",
            type: "UV", // UV、Ku、C
            position: [116.372211, 39.91, 1000], // 这里保存几位小数都可以
            obj: {
              antStatus: "正常", // 天线状态
              paStatus: "正常", // 功放状态
              waveSwitchStatus: "正常", // 波导开关状态
              securityStatus: "正常", // 保密机状态
              fanStatus: "正常", // 风扇状态
            },
          },
          {
            id: "p2",
            type: "UV", // UV、Ku、C
            position: [116.340132, 39.925112, 9000],
            obj: {
              antStatus: "正常", // 天线状态
              paStatus: "正常", // 功放状态
              waveSwitchStatus: "正常", // 波导开关状态
              securityStatus: "正常", // 保密机状态
              fanStatus: "正常", // 风扇状态
            },
          },
        ]);
        this.$store.commit("websocket/SET_TOPOLOGY_LINE_DATA", [
          {
            // p1到p2
            id: "l1",
            positions: {
              start: [116.372211, 39.91, 1000],
              end: [116.340132, 39.925112, 9000],
            },
            linkType: 0, // 0-U/V链路 1-Ku散射链路 2-C散射链路
            linkStatus: 1, // 0-断开 1-连接
          },
        ]);
      }, 5000);
      setTimeout(() => {
        this.$store.commit("websocket/SET_TOPOLOGY_POINT_DATA", [
          {
            // 位置变化的点
            id: "p1",
            type: "UV", // UV、Ku、C
            position: [116.446173, 39.931752, 1500],
            obj: {
              antStatus: "正常", // 天线状态
              paStatus: "正常", // 功放状态
              waveSwitchStatus: "正常", // 波导开关状态
              securityStatus: "正常", // 保密机状态
              fanStatus: "正常", // 风扇状态
            },
          },
          {
            // p2没变
            id: "p2",
            type: "UV", // UV、Ku、C
            position: [116.340132, 39.975112, 9000],
            obj: {
              antStatus: "正常", // 天线状态
              paStatus: "正常", // 功放状态
              waveSwitchStatus: "正常", // 波导开关状态
              securityStatus: "正常", // 保密机状态
              fanStatus: "正常", // 风扇状态
            },
          },
          // 新增的点
          {
            id: "p3",
            type: "Ku", // UV、Ku、C
            position: [116.31108, 39.896, 1000],
            obj: {
              antStatus: "正常", // 天线状态
              paStatus: "正常", // 功放状态
              waveSwitchStatus: "正常", // 波导开关状态
              securityStatus: "正常", // 保密机状态
              fanStatus: "正常", // 风扇状态
            },
          },
          // 新增的点
          {
            id: "p4",
            type: "Ku", // UV、Ku、C
            position: [116.36633, 39.870355, 9000],
            obj: {
              antStatus: "正常", // 天线状态
              paStatus: "正常", // 功放状态
              waveSwitchStatus: "正常", // 波导开关状态
              securityStatus: "正常", // 保密机状态
              fanStatus: "正常", // 风扇状态
            },
          },
          // 新增的点
          {
            id: "p5",
            type: "C", // UV、Ku、C
            position: [116.458101, 39.860273, 1200],
            obj: {
              antStatus: "正常", // 天线状态
              paStatus: "正常", // 功放状态
              waveSwitchStatus: "正常", // 波导开关状态
              securityStatus: "正常", // 保密机状态
              fanStatus: "正常", // 风扇状态
            },
          },
          // 新增的点
          {
            id: "p6",
            type: "C", // UV、Ku、C
            position: [116.401208, 39.839652, 6000],
            obj: {
              antStatus: "正常", // 天线状态
              paStatus: "正常", // 功放状态
              waveSwitchStatus: "正常", // 波导开关状态
              securityStatus: "正常", // 保密机状态
              fanStatus: "正常", // 风扇状态
            },
          },
        ]);
        this.$store.commit("websocket/SET_TOPOLOGY_LINE_DATA", [
          {
            // p1到p2
            id: "l5",
            positions: {
              start: [116.446173, 39.931752, 1500],
              end: [116.340132, 39.975112, 9000],
            },
            linkType: 0, // 0-U/V链路 1-Ku散射链路 2-C散射链路
            linkStatus: 0, // 0-断开 1-连接
          },
          {
            // p3到p4
            id: "l7",
            positions: {
              start: [116.31108, 39.896, 1000],
              end: [116.36633, 39.870355, 9000],
            },
            linkType: 1, // 0-U/V链路 1-Ku散射链路 2-C散射链路
            linkStatus: 1, // 0-断开 1-连接
          },
          {
            // p5到p6
            id: "l9",
            positions: {
              start: [116.458101, 39.860273, 1200],
              end: [116.401208, 39.839652, 6000],
            },
            linkType: 2, // 0-U/V链路 1-Ku散射链路 2-C散射链路
            linkStatus: 1, // 0-断开 1-连接
          },
        ]);
        this.$store.commit("websocket/SET_BUSINESS_LINE_DATA", [
          /*{
            // p1到p2
            id: "l15",
            positions: {
              start: [116.446173, 39.931752, 1500],
              end: [116.340132, 39.975112, 9000],
            },
            rateLevel: 0, // 0-绿色（>=16Mbps） 1-蓝色（>=1Mbps） 2-黄色（>=96kbps） 3-紫色（>=4.8kbps） 4-红色（=2.4kbps）
          },*/
          {
            // p3到p4
            id: "l17",
            positions: {
              start: [116.31108, 39.896, 1000],
              end: [116.36633, 39.870355, 9000],
            },
            rateLevel: 1, // 0-绿色（>=16Mbps） 1-蓝色（>=1Mbps） 2-黄色（>=96kbps） 3-紫色（>=4.8kbps） 4-红色（=2.4kbps）
          },
          {
            // p5到p6
            id: "l18",
            positions: {
              start: [116.458101, 39.860273, 1200],
              end: [116.401208, 39.839652, 6000],
            },
            rateLevel: 3, // 0-绿色（>=16Mbps） 1-蓝色（>=1Mbps） 2-黄色（>=96kbps） 3-紫色（>=4.8kbps） 4-红色（=2.4kbps）
          },
        ]);
      }, 10000);
    },
  },
  beforeDestroy() {
    if (this.viewer) {
      this.viewer.destroy();
    }
  },
};
</script>

<style lang="scss" scoped>
@import "../../../cssFiles/bucket.css";
.map {
  width: 100%;
  height: 100%;
  position: relative;
  .wrap {
    width: 100%;
    height: 100%;
    background-color: #fff;
    clip-path: polygon(
      2% 0%,
      98% 0%,
      100% 3%,
      100% 97%,
      98% 100%,
      2% 100%,
      0% 97%,
      0% 3%
    );
  }
  .legend-wrapper {
    width: 12.5rem;
    height: 5.625rem;
    // background: rgba(0, 0, 0, 0.56);
    position: absolute;
    right: 0.625rem;
    top: 0.625rem;
    z-index: 999;
    display: flex;
    flex-direction: column;
    justify-content: center;

    background: url("~@/assets/images/situation/link-background.png") no-repeat
      center center;
    background-size: 100% 100%;

    .legend-item {
      display: flex;
      align-items: center;
      justify-content: center;

      &:not(:last-child) {
        margin-bottom: 0.3125rem;
      }

      .line {
        width: 4.375rem;
        height: 0.125rem;
      }

      .yellow-line {
        border-bottom: 0.125rem solid #ffaa31;
      }
      .green-line {
        border-bottom: 0.125rem solid #1ed96d;
      }
      .blue-line {
        border-bottom: 0.125rem solid #55a1ff;
      }

      .text {
        width: 5rem;
        text-align: left;
        margin-left: 0.625rem;
        font-size: 0.875rem;
        color: #fff;
      }
    }
  }
  .table-wrapper {
    width: 55.125rem;
    height: auto; /* 高度可以根据内容变化 */
    position: absolute;
    left: 0.1875rem;
    bottom: 2.0625rem;
    z-index: 999;
    transform-origin: bottom left; /* 设置 transform 的基点为左下角 */
  }
}
</style>
